<template>
    <h3>门店信息表</h3>
    门店名称:<input type="text" v-model="sel.Sname" placeholder="请输入门店名称"/>
    服务范围:
    <select  v-model="sel.server">
                    <option value="">--请选择--</option>
                    <option value="早餐早点">早餐早点</option>
                    <option value="川菜">川菜</option>
                    <option value="湘菜">湘菜</option>
                    <option value="粤菜">粤菜</option>
                </select>
    <input type="button" class="btn btn-info" @click="getShop" value="查询"/>
    <input type="button" class="btn btn-info" @click="delshop" value="删除"/>
    <input type="button" class="btn btn-info" @click="updstar" value="修改状态"/>
    <table class="table table-bordered" border="1">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" :checked="check.quan" @click="checkquan"/>
                </td>
                <td>门店编号</td>
                <td>门店名称</td>
                <td>服务范围</td>
                <td>门店logo</td>
                <td>门店图片</td>
                <td>门店状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in shop">
                <td>
                    <input type="checkbox" :checked="check.fan" v-model="check.arrids" :value="item.shop_Id" @change="checkfan"/>
                </td>
                <td>{{ item.shop_Id }}</td>
                <td>{{ item.shop_Name }}</td>
                <td>{{ item.shop_Server }}</td>
                <td><img :src="shop.shop_Logo" style="width: 60px;height: 60px;"/></td>
                <td><img :src="shop.shop_Img" style="width: 60px;height: 60px;"/></td>
                <td>{{ item.shop_Starte?"启用":"禁用" }}</td>
                <td>
                    <a href="#" class="btn btn-danger" @click="UpdShop(item.shop_Id)">修改</a>
                </td>
            </tr>
        </tbody>
    </table>

<span>
共  {{ pageinfo.totalcount }} 条&emsp; 共  {{ pageinfo.pagecount }}  页&emsp; 每页  {{ pageinfo.size }}  条
当前 {{ pageinfo.index }} / {{ pageinfo.pagecount }} 页&emsp;

<a href="#" @click="PageLoad('F')">首页</a>&emsp;
<a href="#" @click="PageLoad('U')">上一页</a>&emsp;
<a href="#" @click="PageLoad('D')">下一页</a>&emsp;
<a href="#" @click="PageLoad('E')">尾页</a>&emsp;

</span>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();

//创建生命周期钩子
onMounted(()=>{
    getShop();
})
//翻页
const PageLoad=(chose:string)=>{
    switch(chose)
    {
        case "F":
                pageinfo.value.index=1;
        break;
        case "U":
        if(pageinfo.value.index>1){
                pageinfo.value.index--;
            }else{
                alert("当前已是第一页")
            }
        break;
        case "D":
        if(pageinfo.value.index<pageinfo.value.pagecount){
                pageinfo.value.index++;
            }else{
                alert("当前已是最后一页")
            }
        break;
        case "E":
            pageinfo.value.index=pageinfo.value.pagecount
    }
    getShop();
}


//创建响应式数据完成全选反选
const check=ref({
    quan:false,
    fan:false,
    arrids:[]
})


//全选
const checkquan=()=>{
    if(check.value.quan){
        check.value.fan=true;
        check.value.arrids=shop.value.map((item:any)=>{
            return item.shop_Id
        })
    }else{
        check.value.fan=false;
        check.value.arrids=[]
    }
}
//反选
const checkfan=()=>{
    if(shop.value.length==check.value.arrids.length){
        check.value.quan=true
    }else{
        check.value.quan=false
    }
}


//修改状态
const updstar=()=>{
    if(!confirm('确认修改吗?')){
        return;
    }
    if(check.value.arrids.length==0){
        alert("未选中,不能操作")
        return;
    }
    axios.put("https://localhost:7283/api/Shop/Updstarte?arrids="+check.value.arrids)
    .then(res=>{
        if(res.data>0){
            alert('状态修改成功')
            getShop();
        }else{
            alert('状态修改失败')
        }
    })
}

//删除
const delshop=()=>{
    if(!confirm('确认删除吗?')){
        return;
    }
    if(check.value.arrids.length==0){
        alert("未选中,不能操作")
        return;
    }
    axios.delete("https://localhost:7283/api/Shop/Delshop",
        {
            params:{
                arrids:check.value.arrids.toString()
            }
        }
    )
    .then(res=>{
        if(res.data>0){
            alert('状态修改成功')
            getShop();
        }else{
            alert('状态修改失败')
        }
    })
    .catch(error=>{
        alert(error)
    })
}

//查询条件
const sel=ref({
    Sname:"",
    server:""
})
//创建响应式数据用于加载门店数据
const shop:any=ref([{
  "shop_Id": 0,
  "shop_Name": "",
  "shop_Server": "",
  "shop_Logo": "",
  "shop_Img": "",
  "shop_Starte": true,
  "shop_Isdelete": false
}])
//加载门店数据
const getShop=()=>{
    axios.get("https://localhost:7283/api/Shop/ShowShop",
        {
            params:{
                Sname:sel.value.Sname,
                server:sel.value.server,
                index:pageinfo.value.index,
                size:pageinfo.value.size
            }
        }
    )
    .then(res=>{
        shop.value=res.data.pageData
        pageinfo.value.totalcount=res.data.totalcount
        pageinfo.value.pagecount=res.data.pageCount
    })
    .catch(error=>{
        alert(error)
    });
    
}
//翻页函数
const pageinfo=ref({
    index:1,
    size:2,
    totalcount:0,
    pagecount:0
})
//跳转到修改页
const UpdShop=(Sid:number)=>{
    router.push({
        name:"UpdShop",
        params:{
            Sid:Sid
        }
    })
}


</script>